<template>
  <div class="dog-edit">
    <div class="page-header">
      <div class="header-content">
        <el-button @click="goBack" icon="el-icon-arrow-left" type="text" class="back-btn">
          返回列表
        </el-button>
        <h1><i class="el-icon-edit"></i>编辑品种信息</h1>
        <p class="subtitle">修改 {{ dogForm.breed }} 的详细信息</p>
      </div>
    </div>

    <div class="form-container" v-loading="loading">
      <el-form
        :model="dogForm"
        :rules="rules"
        ref="dogForm"
        label-width="120px"
        class="dog-form"
      >
        <!-- 基本信息卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-info"></i>
            <span>基本信息</span>
          </div>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="品种名称" prop="breed">
                <el-input v-model="dogForm.breed" placeholder="请输入品种名称" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文名称" prop="breed_en">
                <el-input v-model="dogForm.breed_en" placeholder="请输入英文名称" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="原产国" prop="origin_country">
                <el-input v-model="dogForm.origin_country" placeholder="请输入原产国" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分布区域" prop="distribution_area">
                <el-input v-model="dogForm.distribution_area" placeholder="请输入分布区域" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="犬种分组" prop="group_type">
                <el-select v-model="dogForm.group_type" placeholder="请选择犬种分组" size="medium" style="width: 100%">
                  <el-option label="运动犬组" value="运动犬组"></el-option>
                  <el-option label="牧羊犬组" value="牧羊犬组"></el-option>
                  <el-option label="非运动犬组" value="非运动犬组"></el-option>
                  <el-option label="工作犬组" value="工作犬组"></el-option>
                  <el-option label="猎犬组" value="猎犬组"></el-option>
                  <el-option label="玩具犬组" value="玩具犬组"></el-option>
                  <el-option label="梗犬组" value="梗犬组"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="寿命" prop="life_span">
                <el-input v-model="dogForm.life_span" placeholder="例如：10-12年" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 体型信息卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-data-line"></i>
            <span>体型信息</span>
          </div>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="体重范围(kg)">
                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-input-number v-model="dogForm.weight_min" :min="0" :max="100" :precision="1" placeholder="最小" size="medium" style="width: 100%"></el-input-number>
                  </el-col>
                  <el-col :span="12">
                    <el-input-number v-model="dogForm.weight_max" :min="0" :max="100" :precision="1" placeholder="最大" size="medium" style="width: 100%"></el-input-number>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身高范围(cm)">
                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-input-number v-model="dogForm.height_min" :min="0" :max="100" :precision="1" placeholder="最小" size="medium" style="width: 100%"></el-input-number>
                  </el-col>
                  <el-col :span="12">
                    <el-input-number v-model="dogForm.height_max" :min="0" :max="100" :precision="1" placeholder="最大" size="medium" style="width: 100%"></el-input-number>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="毛发类型" prop="coat_type">
                <el-input v-model="dogForm.coat_type" placeholder="例如：双层毛，中长毛" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毛色" prop="coat_color">
                <el-input v-model="dogForm.coat_color" placeholder="例如：金色、奶油色" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 图片上传卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-picture"></i>
            <span>姿态图片</span>
          </div>
          
          <el-row :gutter="24">
            <el-col :span="6" v-for="(image, index) in ['image1', 'image2', 'image3', 'image4']" :key="index">
              <el-form-item :label="`图片${index + 1}`">
                <div class="image-upload-container">
                  <el-upload
                    class="image-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeImageUpload"
                    :on-success="(response, file) => handleImageSuccess(response, file, image)"
                  >
                    <img v-if="dogForm[image]" :src="dogForm[image]" class="uploaded-image">
                    <i v-else class="el-icon-plus image-uploader-icon"></i>
                  </el-upload>
                  <el-input v-model="dogForm[image]" placeholder="或输入图片URL" size="small" style="margin-top: 8px;"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 评分信息卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-star-on"></i>
            <span>评分信息</span>
          </div>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="好养度">
                <el-rate v-model="dogForm.care_difficulty" show-text :texts="['很难养', '较难养', '一般', '比较好养', '非常好养']"></el-rate>
              </el-form-item>
              
              <el-form-item label="运动需求">
                <el-rate v-model="dogForm.exercise_needs" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
              </el-form-item>
              
              <el-form-item label="美容需求">
                <el-rate v-model="dogForm.grooming_needs" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="训练难度">
                <el-rate v-model="dogForm.training_difficulty" show-text :texts="['很容易', '较容易', '一般', '较难', '很难']"></el-rate>
              </el-form-item>
              
              <el-form-item label="吠叫程度">
                <el-rate v-model="dogForm.barking_level" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 适应性卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-check"></i>
            <span>适应性</span>
          </div>
          
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="适合儿童">
                <el-switch v-model="dogForm.good_with_children" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="适合其他宠物">
                <el-switch v-model="dogForm.good_with_pets" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="适合公寓">
                <el-switch v-model="dogForm.apartment_friendly" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 详细描述卡片 -->
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-document"></i>
            <span>详细描述</span>
          </div>
          
          <el-form-item label="性格特征" prop="temperament">
            <el-input v-model="dogForm.temperament" placeholder="例如：友善、可靠、值得信赖" size="medium"></el-input>
          </el-form-item>
          
          <el-form-item label="特点描述" prop="characteristics">
            <el-input type="textarea" :rows="3" v-model="dogForm.characteristics" placeholder="请描述该品种的主要特点" size="medium"></el-input>
          </el-form-item>
          
          <el-form-item label="习性描述" prop="habits">
            <el-input type="textarea" :rows="3" v-model="dogForm.habits" placeholder="请描述该品种的生活习性" size="medium"></el-input>
          </el-form-item>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="健康问题" prop="health_issues">
                <el-input type="textarea" :rows="2" v-model="dogForm.health_issues" placeholder="请描述常见的健康问题" size="medium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特殊注意事项" prop="special_notes">
                <el-input type="textarea" :rows="2" v-model="dogForm.special_notes" placeholder="请描述特殊注意事项" size="medium"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="价格范围" prop="price_range">
            <el-input v-model="dogForm.price_range" placeholder="例如：3000-8000元" size="medium" style="width: 300px;"></el-input>
          </el-form-item>
        </el-card>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <el-button @click="goBack" size="large">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting" size="large">
            <i class="el-icon-check"></i>
            保存修改
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DogEdit',
  data() {
    return {
      loading: false,
      submitting: false,
      dogForm: {
        breed: '',
        breed_en: '',
        image1: '',
        image2: '',
        image3: '',
        image4: '',
        distribution_area: '',
        weight_min: null,
        weight_max: null,
        height_min: null,
        height_max: null,
        habits: '',
        care_difficulty: 3,
        characteristics: '',
        temperament: '',
        life_span: '',
        origin_country: '',
        group_type: '',
        coat_type: '',
        coat_color: '',
        exercise_needs: 3,
        grooming_needs: 3,
        training_difficulty: 3,
        good_with_children: 1,
        good_with_pets: 1,
        apartment_friendly: 1,
        barking_level: 3,
        health_issues: '',
        special_notes: '',
        price_range: ''
      },
      rules: {
        breed: [
          { required: true, message: '请输入品种名称', trigger: 'blur' }
        ],
        breed_en: [
          { required: true, message: '请输入英文名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadDogData()
  },
  methods: {
    loadDogData() {
      // const id = this.$route.params.id
      this.loading = true
      
      // 模拟API调用加载数据
      setTimeout(() => {
        // 这里应该根据ID从API获取数据
        // 现在使用模拟数据
        const mockData = {
          id: 1,
          breed: '金毛寻回犬',
          breed_en: 'Golden Retriever',
          image1: 'https://images.unsplash.com/photo-1552053831-71594a27632d?w=300',
          image2: 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=300',
          image3: 'https://images.unsplash.com/photo-1605568427561-40dd23c2acea?w=300',
          image4: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=300',
          distribution_area: '全球广泛分布',
          weight_min: 25,
          weight_max: 34,
          height_min: 51,
          height_max: 61,
          care_difficulty: 5,
          exercise_needs: 4,
          characteristics: '智商高，易训练，对家庭忠诚，毛发需要定期梳理',
          temperament: '友善、可靠、值得信赖',
          origin_country: '苏格兰',
          group_type: '运动犬组',
          apartment_friendly: 0,
          life_span: '10-12年',
          coat_type: '双层毛，中长毛',
          coat_color: '金色、奶油色',
          grooming_needs: 3,
          training_difficulty: 2,
          good_with_children: 1,
          good_with_pets: 1,
          barking_level: 2,
          health_issues: '髋关节发育不良、眼部疾病、心脏病',
          special_notes: '需要大量运动空间，不适合长时间独处',
          price_range: '3000-8000元',
          habits: '温顺友好，喜欢游泳和捡拾游戏，需要大量运动和社交'
        }
        
        this.dogForm = { ...mockData }
        this.loading = false
      }, 800)
    },
    goBack() {
      this.$router.push('/dogs')
    },
    handleSubmit() {
      this.$refs.dogForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 模拟API调用
          setTimeout(() => {
            this.submitting = false
            this.$message.success('修改成功')
            this.$router.push('/dogs')
          }, 1000)
        }
      })
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleImageSuccess(response, file, imageField) {
      this.dogForm[imageField] = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped>
.dog-edit {
  background: #f8fafc;
  min-height: 100vh;
}

.page-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 0;
  margin-bottom: 24px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.back-btn {
  font-size: 14px;
  color: #718096;
  margin-bottom: 12px;
  padding: 0;
}

.back-btn:hover {
  color: #2b6cb0;
}

.header-content h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  display: flex;
  align-items: center;
}

.header-content h1 i {
  margin-right: 12px;
  color: #ed8936;
  font-size: 24px;
}

.subtitle {
  margin: 0;
  color: #718096;
  font-size: 16px;
}

.form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.form-card {
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.form-card .el-card__header {
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 24px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.card-header i {
  margin-right: 8px;
  color: #4299e1;
  font-size: 18px;
}

.form-card .el-card__body {
  padding: 24px;
}

.dog-form .el-form-item {
  margin-bottom: 20px;
}

.dog-form .el-form-item__label {
  font-weight: 600;
  color: #4a5568;
}

.image-upload-container {
  width: 100%;
}

.image-uploader {
  border: 2px dashed #cbd5e0;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.image-uploader:hover {
  border-color: #4299e1;
}

.image-uploader-icon {
  font-size: 28px;
  color: #a0aec0;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-actions {
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 24px;
}

.form-actions .el-button {
  padding: 12px 32px;
  font-weight: 600;
}

.form-actions .el-button + .el-button {
  margin-left: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 0 16px 24px;
  }

  .header-content {
    padding: 0 16px;
  }

  .header-content h1 {
    font-size: 24px;
  }

  .form-card .el-card__body {
    padding: 16px;
  }

  .form-actions {
    padding: 24px 0;
  }

  .form-actions .el-button {
    width: 100%;
    margin: 0 0 12px 0 !important;
  }
}
</style>
